<template>
    <div id="user-history">
        <div class="address">
          <el-button type="primary" class="add_Address" @click="add_Address">添加地址</el-button>
          <div class="address_item" v-for="item in address" :key="item.id">
            <h2>联系地址：</h2>
            <div class="address_content">
                <span>{{ item.districts }} </span>
                <span>{{item.city}} </span>
                <span>{{ item.county }} </span>
                <span>{{ item.full_address }}</span>
            </div>
            <div class="btn">
                <el-button type="primary" @click="edit_Address(item)">编辑地址</el-button>
                <el-button type="danger" @click="delete_Address(item.id)">删除地址</el-button>
            </div>
          </div>
        </div>
        <MyDialog ref="dialog" @handlerConfim="confim"></MyDialog>
    </div>
</template>

<script>
import MyDialog from '@/components/userComponents/MyDialog.vue'
import { Message, MessageBox } from 'element-ui'
import { getAddressService, deleteAddressService } from '@/api/user'
export default {
  data () {
    return {
      address: []
    }
  },
  async created () {
    this.getAddress()
    await this.$store.dispatch('userStore/getBaseInfoService')
  },
  methods: {
    async getAddress () {
      await getAddressService().then(res => {
        this.address = res.data
      })
    },
    add_Address () {
      this.$refs.dialog.open('添加地址', {})
    },

    edit_Address (obj) {
      this.$refs.dialog.open('编辑地址', obj)
    },
    delete_Address (id) {
      MessageBox.confirm('你确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // TODO:调用接口
        await deleteAddressService(id).then(async res => {
          if (res.status === 0) {
            await Message.success('删除成功')
            this.getAddress()
          } else {
            Message.error('删除失败')
          }
        })
      }).catch(() => { })
    },
    async confim () {
      await this.getAddress()
    }
  },
  components: {
    MyDialog
  }

}
</script>

<style lang="less" scoped>
.address{
    width: 100%;
    text-align: center;
    /deep/  .add_Address{
        width: 100%;
    }
    .address_item{
        margin-top: 20px;
        padding: 30px;
        width: 100%;
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 8px;
        .address_content{
            span{
                margin-right: 5px;
                font-size: 16px;
                color: #333333;
            }
            span:nth-child(4){
                font-size: 18px;
                font-weight: 700;
                color: #000;
            }
        }
    }
}

</style>
